<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../plugins/jquery.1.12.4.min.js"></script>
    <script src="../../plugins/bootstrap-table-1.11.0/bootstrap-table.min.js"></script>
    <script src="../../plugins/bootstrap-table-1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="../../js/common.js"></script>
    <script src="../../plugins/bootstrap-3.3.0/js/bootstrap.min.js"></script>
    <script src="../../plugins/jquery-confirm/jquery-confirm.min.js"></script>

    <link rel="stylesheet" href="../../plugins/bootstrap-3.3.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-table-1.11.0/bootstrap-table.min.css">
    <link rel="stylesheet" href="../../plugins/jquery-confirm/jquery-confirm.min.css">

</head>
<body>
<div id="main" style="width: 80%;margin-top: 20px;margin-left: 10%;">
    <div id="toolbar">
    </div>
    <table id="table"></table>
</div>

<script>
    $('#table').bootstrapTable({
        url: 'data1.json',
        height:getHeight(),
        striped: true, // 是否显示行间隔色
        search: true,
        showRefresh: true,
        showColumns: true,
        minimumCountColumns: 2,
        clickToSelect: true,
        detailView: true,
        detailFormatter: 'detailFormatter',
        paginationLoop: false,
        sidePagination: 'server',
        silentSort: false,
        smartDisplay: false,
        escape: true,
        searchOnEnterKey: true,
        queryParams: "queryParams",
        toolbar: '#toolbar',
        sidePagination: "client",
        maintainSelected: true,
        uniqueId: "ID",
        pageSize: "10",
        pagination: true, // 是否分页
        sortable: true, // 是否启用排序
        columns: [
            {field: 'ck', checkbox: true},
            {field: 'id',title: '登录名'  ,sortable: true},
            {field: 'name',title: '昵称',sortable: true,},
            {field: 'price',title: '角色',sortable: true,},
            {field: 'price',title: '操作',width: 120,align: 'center',valign: 'middle',formatter: actionFormatter, clickToSelect: false},
        ]
    });
    //操作栏的格式化
    function actionFormatter(value, row, index) {
        // var id = value;
        // var result = "";
        // result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";
        // result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
        // result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
        // return result;
        return [
            '<a class="update" href="javascript:;" onclick="updateAction()" data-toggle="tooltip" title="Edit"><i class="glyphicon glyphicon-edit"></i></a>　',
            '<a class="delete" href="javascript:;" onclick="deleteAction()" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a>'
        ].join('');
    }
</script>
</body>

</html>
